import React from 'react'

const List = ({list, changeItem, del}) => {
    return (
        <ul>
            {
                list.map(item => (
                    <li className='list' key={item.id} >
                        <span>
                            <input 
                                type='checkbox' 
                                checked={item.isComplete} 
                                onChange={() => changeItem(item)}
                            />
                            {
                                item.isComplete ? (
                                    <s>
                                        {item.title}
                                    </s>
                                ) : item.title
                            }
                        </span>
                        <span
                            onClick={() => del(item)}
                        >
                            x
                        </span>
                    </li>
                ))
            }
            
        </ul>
    )
}

export default List
